<%--
  Date: 2024/10/16 9:48
  Description:
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页</title>
  <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
  <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
  <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
  <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
</head>
<body>
<style>
  .demo-login-container{width: 320px; margin: 21px auto 0;}
  .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
  #box{
    margin-top: 200px;
  }
</style>

<div id="box">
  <h3 style="color: #16baaa;text-align: center">欢迎登录</h3>
  <form class="layui-form">
    <div class="demo-login-container">
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-username"></i>
          </div>
          <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-password"></i>
          </div>
          <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
        </div>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
      </div>
      <div class="layui-form-item demo-login-other">
        <label>社交账号登录</label>
        <span style="padding: 0 21px 0 6px;">
        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
      </span>
        或 <a href="register.jsp">注册帐号</a>
      </div>
    </div>
  </form>
</div>


<script>
  layui.use(function(){
    var form = layui.form;
    let $ = layui.jquery;
    var layer = layui.layer;
    // 提交事件
    form.on('submit(demo-login)', function(data){
      var field = data.field; // 获取表单字段值

      // 此处可执行 Ajax 等操作
      $.post('/javaweb/user?method=login',field,function (res){
          if (res.code==0){
             layer.msg(res.msg,{icon:1},function () {
                 window.location.href = 'scoreLayui.jsp'
             })
          }else{
            layer.msg(res.msg,{icon:2})
          }
      })
      // …
      return false; // 阻止默认 form 跳转
    });
  });
</script>

</body>
</html>
